Confirm?

Are you sure you want to proceed?
M
Manuel Ugalde

Dry Cleaning POS Interface Design

Clone & Customize via AI

Tailwind Order Form for a POS-style new order workflow. Implements a Blazor EditForm with validation, input bindings, dynamic order items list, and Tailwind utility layout.

● LIVE DEMO
Generated using Instruct UI - An AI for Blazor UI Generation
## What's implemented - Customer lookup input with quick actions (Find, New) and a selected-customer card. - Garment category tiles and item buttons to add services/items to the order. - Dynamic order summary list with quantity controls, item removal, and per-item services. - Totals calculation (subtotal, tax, total) and a ready-by InputDate plus a submit button. - Client-side validation via EditForm and DataAnnotationsValidator. ## Key components - EditForm, DataAnnotationsValidator - InputText, InputDate - @bind-Value bindings on form inputs and model properties - Collection rendering via foreach for garment categories and OrderItems - Button actions wired via @onclick handlers and StateHasChanged for UI refresh ## How it works - The page uses a backing OrderViewModel and smaller view models for customer, garment categories, garment items, services, and order items. - UI actions call methods (SelectCategory, AddItemToOrder, RemoveItemFromOrder, UpdateQuantity) that mutate the model and call RecalculateTotals to update Subtotal/Tax/Total and trigger StateHasChanged. - Validation uses EditForm and DataAnnotationsValidator; HandleValidSubmit is the form submit handler placeholder for payment processing. - InputDate binds to currentOrder.ReadyByDate; InputText binds the customer search term via @bind-Value. ## Styling - Tailwind utility classes provide layout (flex, grid, gap-*, p-*, text-*, bg-*) and responsive behavior (grid-cols and xl: modifiers). - Iconography is implemented with Font Awesome CSS classes (fas fa-*) used inside buttons and list items. - The layout splits into a narrow vertical sidebar and a two-column main area (xl:col-span adjustments) for responsive desktop-first behavior. ## Reuse steps 1. Add the Razor component and the view model classes to the Blazor project. 2. Ensure Tailwind CSS is available in the project (build pipeline or CDN) and include Font Awesome for icons. 3. Import required namespaces (Microsoft.AspNetCore.Components.Forms) where needed. 4. Wire data services (ICustomerService, IOrderService) in Program.cs and inject them into the component if server data is required. 5. Replace stub LoadInitialData and HandleValidSubmit with real service calls and payment processing integration. ## Limitations & next steps - This is a single-page UI sample; server-side persistence, authentication, and payment integration are not implemented. - Customer search is a local string; replace with an API call and async search suggestions for production. - Accessibility enhancements (aria labels, keyboard focus management) and unit tests are recommended. - Add localization, input validation attributes on models, and optimistic concurrency handling when saving orders. Note: Generated by Instruct UI as an editable Blazor component scaffold; adapt models and services before production use.